<template>
  <el-container v-bind:id="id" class="sz-drag-dialog" v-if="dialogVisible">
    <el-header>
      <div @mousedown="mousedown">
        <h2 v-html="title"></h2>
        <div
          @click.stop="closeDialog()"
          style="position: absolute;top: 0px; right: 20px;"
        >
          <span>
            <svg class="icon" aria-hidden="false">
              <use xlink:href="#el-icon-ext-close"></use>
            </svg>
          </span>
        </div>
      </div>
    </el-header>
    <el-main>
      <slot>这里是内容</slot>
    </el-main>
    <el-footer>
      <span class="dialog-footer">
        <slot name="footer"></slot>
      </span>
    </el-footer>
  </el-container>
</template>

<script>
import _ from "lodash";
export default {
  name: "sz-drag-dialog",
  props: {
    title: String,
    visible: Boolean,
    id: [String, Number]
  },
  data() {
    return {
      selectElement: "",
      dialogVisible: _.clone(this.visible)
    };
  },
  computed: {},
  watch: {
    visible() {
      this.dialogVisible = _.clone(this.visible);
    }
  },
  methods: {
    closeDialog(e) {
      this.dialogVisible = false;
      this.$emit("closeDialog", false);
    },
    mousedown(event) {
      this.selectElement = document.getElementById(this.id);
      var div1 = this.selectElement;
      this.selectElement.style.cursor = "move";
      this.isDowm = true;
      var distanceX = event.clientX - this.selectElement.offsetLeft;
      var distanceY = event.clientY - this.selectElement.offsetTop;
      document.onmousemove = function(ev) {
        var oevent = ev || event;
        div1.style.left = oevent.clientX - distanceX + "px";
        div1.style.top = oevent.clientY - distanceY + "px";
      };
      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
        div1.style.cursor = "default";
      };
    }
  }
};
</script>

<style scoped>
.sz-drag-dialog {
  z-index: 2000;
  -webkit-box-shadow: 0px 3px 10px rgba(0, 117, 255, 0.06);
  box-shadow: 0px 3px 10px rgba(0, 117, 255, 0.06);
}
.el-container {
  position: absolute;
  height: 500px;
  width: 500px;
  border: 1px;
  top: 20%;
  left: 35%;
  border-radius: 2px;
}

.dialog-footer {
  text-align: right;
}

.el-main {
  background-color: white;
}

.el-footer {
  background-color: white;
}

.el-header {
  background-color: white;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
